<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="/libs/font/iconfont.css">
    <link rel="stylesheet" href="/css/details.css">
</head>

<!-- 详情页实现方法:从地址栏中获取到我们从首页或列表页得到的id值,然后在假数据中匹配到此id的商品然后显示出来 -->

<body>
    <!-- header -->
    <header></header>

    <!-- 将页面主体整个放在一个section中,然后就可以使用模板渲染页面了 -->
    <section id="Template">
        <!-- 这个是放页面除了header和footer的其他内容模板的地方 -->
    </section>

    <!-- 页面主体(#Template)的数据模板渲染 -->
    <script type="text/html" id="Template_01">
        
        <!-- 商品名 -->
        <div id="Route">
            <p>
                <span>首页</span>
                >
                <span>男装</span>
                >
                <span>T恤</span>
                >
                <span>短袖T恤</span>
                >
                <span id="TradeName">{{tittle}}</span>
                <!-- 注意因为这个title在页面中只有一个地方需要,所以不能在让他和其他有长度的数据一块 each 循环填写,只能写一个,且他是我们设定的假数据中的detils对象中的一个属性,所以可以直接写就行 -->
            </p>
            <h3>{{tittle}}</h3>
            <div>
                <a href="#description">产品描述
                </a>
                |
                <a href="">评论</a>
                |
                <a href="">提问</a>
            </div>
        </div>


        <!-- 商品展示区 -->
        <div id="Exhibition">

            <!-- 商品展示 -->
                <!--整体左浮动,然后其中的内容使用display:flex;弹性盒子 -->
            <div>
                <!-- 70 X 70 图 --> 
                <!-- 使用放大镜插件,来实现点击小图切换中等图片的操作,方法:在小图的外边包裹一层a标签(注意:必须是a标签),然后给这个a标签自定义两个属性 data-image 和 data-zoom-image,这两个的值分别为: data-image = "这张小图所对应的中图的src",data-zoom-image = "所对应的大图的src" -->
                <div >
                    <ul id="minimg">
                        {{each imgs img}}
                            <li>
                                <a href="" data-image="{{img}}" data-zoom-image="{{img}}">
                                    <img src="{{img}}" alt="">
                                </a>
                            </li>
                        {{/each}}
                        <!--
                        <li>
                            <img src="/images/details/ss01.jpg" alt="">
                        </li>
                        <li>
                            <img src="/images/details/ss02.jpg" alt="">
                        </li>
                        <li>
                            <img src="/images/details/ss01.jpg" alt="">
                        </li>
                        <li>
                            <img src="/images/details/ss02.jpg" alt="">
                        </li>
                        -->
                    </ul>
                </div>
                <!-- 400 x 400图 -->
                <div>
                    <!-- 默认显示第0张中等大小的图片,因为我们在假数据中定义过了一个属性为imgs的数组用来存放图片,可以用数组的方法来访问 -->
                    <img src="{{imgs[0]}}" alt="" class="zoom-image">
                    {{each imgs img}}
                        <img src="{{img}}" alt="">
                    {{/each}}
                    <!--
                    <img src="/images/details/s01.jpg" alt="">
                    <img src="/images/details/s02.jpg" alt="" style="display: none;">
                    <img src="/images/details/s01.jpg" alt="" style="display: none;">
                    <img src="/images/details/s02.jpg" alt="" style="display: none;">
                    -->
                </div>

                <!-- 购物选择区 -->
                <div>
                    <ul>
                        <li>
                            <span>限时抢购价:</span>
                            <span>￥<strong id="pirce">{{PanicBuyingPrice}}</strong></span>
                            <span><strong>充值后相等于: {{RechargePrice}}</strong></span>
                        </li>
                        <li>
                            <div><a href="#">充100返100,点击充值</a></div>
                        </li>

                        <!-- 颜色 -->
                        <li id="color">
                            颜色:
                            {{each Color color}}
                                <span>{{color}}</span>
                                <!-- 从后端假数据中拿到数组并一一展示在页面中  -->
                            {{/each}}
                            <!-- <span>黑色</span>
                            <span>白色</span>
                            <span>红色</span>
                            <span>蓝色</span>
                            <span>绿色</span> -->
                        </li>

                        <!-- 尺码 -->
                        <li id="Size">
                            尺码 :
                            {{each Size size}}
                                <span>{{size}}</span>
                            {{/each}}
                            <!--
                            <span>S</span>
                            <span>M</span>
                            <span>L</span>
                            <span>XL</span>
                            <span>XXL</span>
                            -->
                        </li>
                        <!-- 数量 -->
                        <li id="Num">数量:
                            <select>
                                <option value="0">
                                    0</option>
                                <option value="1">
                                    1</option>

                                <option value="2">
                                    2</option>

                                <option value="3">
                                    3</option>

                                <option value="4">
                                    4</option>

                                <option value="5">
                                    5</option>

                                <option value="6">
                                    6</option>

                                <option value="7">
                                    7</option>

                                <option value="8">
                                    8</option>

                                <option value="9">
                                    9</option>

                                <option value="10">
                                    10</option>
                            </select>
                        </li>
                        <!-- 已选 -->
                        <li>
                            已选:
                            <!-- 所选颜色 -->
                            <span id="SelectedColor"></span>

                            <!-- 所选尺寸 -->
                            <span id="SelectedSize"></span>

                            <!-- 所选数量 -->
                            <span id="SelectedNum"></span>

                            <!-- 有无货物 -->
                            <span id="HaveNo">

                            </span>
                        </li>
                        <li>
                            <button>立即购买</button>
                            <button id="addCart">加入购物车</button>
                        </li>
                        <!-- 优惠提示 -->
                        <li>
                            <div>
                                <span></span>
                                优惠提示
                                <span></span>
                            </div>
                            <div>
                                <span>免邮</span>
                                全场购物满199元免运费
                            </div>
                            <div>
                                <span>多买优惠</span>
                                买三免一
                            </div>
                            <div>
                                <span>优惠券</span>
                                <span>满300减30</span>
                                <span>新人有礼</span>
                            </div>
                            <div></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--  购物车显示区 -->
        <!-- 放在商品显示区的最右边,没有东西的时候显示为空 -->
        <div id="ShoppingCart">
            <ul>
                <li>商品名</li>
                <li>价格</li>
                <li>颜色</li>
                <li>尺码</li>
                <li>数量</li>
            </ul>
            <div id="DisplayInformation">
                <!-- 购物车内容显示区 -->
            </div>
        </div>

        <!-- 产品描述 -->
        <div id="describe">
            <a name="description"><strong>产品描述:</strong></a>
            <p><span></span>{{Describe}}</p>
            <p>【面料】{{Fabric}}</p>
            <p><span></span>{{Fabric}}</p>
            <p>【版型】{{EditionType}}</p>
            <!-- <p><span></span>ten_ do_ _ten,日本像素设计创始人,2001年开始运行"ten_do” 网站,每周六更新一次,已经公布超过35.000个移动绘图芯片。图案是来自大家都非常喜欢的米尔顿.格拉瑟大师的I LOVE Hew York的T恤的灵感,心易碎请珍惜</p>
            <p>【面料】 大身 21S美棉环锭纺精梳汗布 克重 180-195g/㎡
            </p>
            <p><span></span>罗纹 32S*100D低弹丝1*1普罗 克重 310g/㎡</p>
            <p>【版型】修身</p>
            -->
        </div>

        <!-- 产品属性 -->
        <div id="attribute">
            <p><strong>产品属性</strong></p>
            <p>
                <span>人群:
                    <span>男</span>
                    <br>
                    袖型:
                    <span>常规袖</span>
                </span>
                <span>风格:
                    <span>风格:休闲运动简约</span>
                    <br>
                    领型:
                    <span>圆领</span>
                </span>
                <span>场合:
                    <span>旅行运动休闲，户外运动"</span>
                    <br>
                    衣长:
                    <span>常规款</span>
                </span>
                <span>季节:
                    <span>春夏秋</span>
                    <br>花色:
                    <span>印花</span>
                </span>
                <span>新型:
                    <span>修身.修身款</span>
                    <br>
                    VT主题:
                    <span>像素</span>
                </span>
                <span>袖长:
                    <span>短袖</span>
                    <br>
                    设计师:
                    <span> ten_do_ten</span>
                </span>
            </p>
            <p></p>
        </div>

        <!-- 详情图片 -->
        <div id="picture">
            <p>详情图片:</p>
            <p>注:商品实际颜色以静物图为准</p>
        </div>

        <!-- 模特 尺码 洗涤保养 -->
        <section>
            <div id="model">
                <h1>模特展示</h1>
                {{each Model model}}
                    <img src="{{model}}" alt="">
                {{/each}}
                <!-- <img src="/images/details/6194567_04.jpg" alt=""> -->
            </div>
            <div id="Size">
                <h1>产品尺码</h1>
                <img src="/images/details/6194567_06.jpg" alt="">
            </div>
            <div id="maintain">
                <img src="/images/details/6194567_08.jpg" alt="">
            </div>
        </section>

        <!-- 评论 提问 -->
        <div id="Interaction">
            <div id="Recommend">
                <ul>
                    <li>推荐产品</li>
                    <li>
                        <a href="#">
                            <img src="/images/details/1581870186.jpg" alt="">
                            <p>凡客短袖 夏季 男款 白色</p>
                            <p>售价:￥18</p>
                        </a>

                        <a href="#">
                            <img src="/images/details/1581870186.jpg" alt="">
                            <p>凡客短袖 夏季 男款 白色</p>
                            <p>售价:￥18</p>
                        </a>

                        <a href="#">
                            <img src="/images/details/1581870186.jpg" alt="">
                            <p>凡客短袖 夏季 男款 白色</p>
                            <p>售价:￥18</p>
                        </a>

                        <a href="#">
                            <img src="/images/details/1581870186.jpg" alt="">
                            <p>凡客短袖 夏季 男款 白色</p>
                            <p>售价:￥18</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div id="QuestionsAndAnswers">
                <div id="comment">
                    最新评论:
                    <input type="radio" name="a" id="">全部评论
                    <input type="radio" name="a" id="">图片评论
                    <button>我要评论</button>
                </div>
                <!-- 完了往里边放评论的地方 -->
                <div id="CommentArea">
                    暂无最新评论
                </div>
                <div id="questions">

                </div>
            </div>
        </div>
    </script>


    <!-- footer -->
    <footer></footer>

    <script src="/libs/require/require.min.js" data-main="/js/details"></script>
</body>
</html>